<template>
  <div class="box">
    <h4>
      <a class="el-icon-arrow-left" @click="on"></a>
      <span>文章管理</span>
      <a></a>
    </h4>
    <div class="runbox">
      <div
        v-for="(item, index) in data"
        :key="index"
        class="box_content"
        :data-key="item.tid"
      >
        <p>{{ item.content_text }}</p>
        <p class="content_time">
          
          <a class="delbtn"  @click="delcontent($event)">删除</a>
          <a class="times">时间：{{ item.release_time }}</a>
        </p>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      data: [],
      flag: 0, 
    };
  },
  methods: {
    on() {
      this.$router.push({
        path: "/me",
      });
    },
    delcontent(e) {
      // console.log(e.target.parentNode.parentNode.getAttribute("data-key"));
      this.$http
        .post("/api/personal/personalarticledel", {
          tid: e.target.parentNode.parentNode.getAttribute("data-key"),
        })
        .then((res) => {
          
          if (res.code == 200) {
            // console.log('删除成功');
           this.reload()
           this.$message({
              message: '删除成功',
              type: 'success'
            })
          }
        });
    },
  },
  mounted() {
    this.$http
      .get("/api/personal/personalarticleshow", {
        uid: this.$jwt(localStorage.getItem("User-Token")).uid,
      })
      .then((res) => {
        // console.log(res);
        res.personalarticleData.forEach((once) => {
          this.data.push(once);
        });
      });
  },
};
</script>

<style lang="less" scoped>
.box {
  h4 {
    display: flex;
    margin: 0;
    height: 2rem;
    color: #fff;
    background-color: #000;
    a {
      flex: 1;
      line-height: 2rem;
    }
    span {
      flex: 10;
      text-align: center;
    }
  }
  .runbox {
    height: 90vh;
    overflow-y: scroll;
    background-color: rgb(53, 52, 52);
    .box_content {
      width: 90%;
      height: auto;
      margin: 1rem auto;
      color: #fff;
      border: 1px solid #ccc;
      p {
        padding: .5rem 0.3rem;
        margin: 0;
      }
      .content_time {
        display: flex;
        font-size: .8rem;
        text-align: right;
      }
      .times {
        flex: 1;
      }
      .delbtn {
        flex: 1;
        text-align: right;
        font-size: .8rem;
        color: red;
      }
    }
  }
}

</style>